import { Comment } from '@/api'
import { useAppDispatch, useAppSelector } from '@/store/hook'
import { getReCommentAction } from '@/store/reducers/article'
import { NavBar, Popup } from 'antd-mobile'
import { useEffect } from 'react'
import CommentFooter from '../CommentFooter'
import CommentItem from '../CommentItem'
import NoComment from '../NoComment'
import styles from './index.module.scss'
declare type Props = {
  visible?: boolean
  close?: () => void
  source: Comment
  show?:()=>void
}
export default function CommentReply ({ visible, close, source,show }: Props) {
  const dispatch = useAppDispatch()
  useEffect(() => {
    if(source.com_id){
      dispatch(getReCommentAction(source.com_id))
    }
  }, [source,dispatch])
  const reCommentRes=  useAppSelector(state=>state.articler.reCommentRes)
  return (
    <Popup visible={visible} bodyStyle={{ height: '100vh' }}>
      <div className={styles.root}>
        <div className='reply-wrapper'>
          {/* 顶部导航栏 */}
          <NavBar className='transparent-navbar' onBack={close}>
            <div>{0}条回复</div>
          </NavBar>

          {/* 原评论信息 */}
          <div className='origin-comment'>
            <CommentItem com={source} type='origin' />
          </div>

          {/* 回复评论的列表 */}
          <div className='reply-list'>
            <div className='reply-header'>全部回复</div>
            {reCommentRes?.results?.length === 0 && <NoComment />}
            {reCommentRes?.results?.map(v=>{
              return <CommentItem com={v} type='reply' key={v.com_id}/>
            })}
          </div>

          {/* 评论工具栏，设置 type="reply" 不显示评论和点赞按钮 */}
          <CommentFooter type="reply" show={show}/>
        </div>
      </div>
    </Popup>
  )
}
